<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
    .one {
        width: 140px;
        height: 140px;
        margin: 20px;
        background: #9999CC;
        border: #000 1px solid;
        float: left;
        font-size: 17px;
        font-family: Roman;
    }
    </style>
    <!--引入jquery的js库-->
    <script type="text/javascript" src="js/jquery-1.3.1.js"></script>
</head>

<body>
    <input type="button" value="获取 class 和设置 class 都可以使用 attr() 方法来完成(给id 为first添加 .one 样式)" id="b1" />
    <input type="button" value="追加样式: addClass() (给id 为first添加 .one 样式)" id="b2" />
    <input type="button" value="移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class(给id 为first删除 .one 样式) " id="b3" />
    <input type="button" value="切换样式: toggleClass() (给id 为first切换 .one 样式) --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它" id="b4" />
    <input type="button" value="判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false" id="b5" />
    <div id="first" >
        first
    </div>
    <div id="second">
        second
    </div>
    <div id="third" class="one">
        three
    </div>
</body>
<script language="JavaScript">
//获取 class 和设置 class 都可以使用 attr() 方法来完成.(给id 为first添加 .one 样式)
$("#b1").click(function(){
	$("#first").attr("class","one");
});
//追加样式: addClass() 
$("#b2").click(function(){
	$("#first").addClass("one");
});
//移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class 
$("#b3").click(function(){
	$("#third").removeClass("one");

//切换样式: toggleClass()  --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它
$("#b4").click(function(){
	$("#first").toggleClass("one");
});
//判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false
$("#b5").click(function(){
	alert("has class:" +$("#first").hasClass("one"));
});
</script>

</html>
